<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div class="menu"></div>

    <script>
        // 阻止默认事件 ：
        /* 
            2种方式 ： 1.e.preventDefault(); // 阻止默认事件
                        // 注意 阻止默认行为 可以写在任意位置；
                        IE8或者以下 ： e.returnValue = false;
                      2. 在事件函数里 return false；
                        // 注意：return false 只能写在函数的最后。
        
        
        */
        // 1.自定义右键菜单 
        // 点击鼠标右键的时候 鼠标右键有默认的行为，默认行为就是默认事件
        // 默认事件 就是元素自带的行为 。
        // 2.一个a标签 href="http://www.baidu.com" 点击a标签 通过js跳转到sohu.com里去 :js里的跳转 window.location.href = "地址";
        var menuEle = document.querySelector(".menu");
        document.oncontextmenu = function (e) {

            //  // 阻止右键的默认行为 。
            // console.log("显示自定义菜单")
            var x = e.clientX;
            var y = e.clientY;
            // console.log(x,y);
            // 1.显示自定右键菜单
            menuEle.style.display = "block";
            // 2.把自定义菜单移动到鼠标所在的位置
            menuEle.style.left = x + "px";
            menuEle.style.top = y + "px";
            // return false;
            e.preventDefault();
            // return false;
        }


    </script>
</body>

</html>